<template>
  <div class="groupreg">
    <div class="head">
      <mt-header :title="title">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="content">
        <div class="top">
            <div class=" clearfix">
                <div class="left fl">
                <img src="../assets/1308040.png" alt="">
            </div>
            <div class="right fr">
                <h3>科研能力提升策略（优秀班级）</h3>
                <p>地点：北京市</p>
                <p>时间：10月9号至10月20号（10天）</p>
            </div>
            </div>
           
        </div>
         <div class="con">
                <ul>
                    <li class=" clearfix">
                        <span class="fl">报名人数限制</span><span class="fr spn1"><img src="../assets/off@2x.png" alt=""></span>
                    </li>
                    <li class=" clearfix">
                        <span class="fl">报名截至时间</span><span class="fr spn2">2019年10月9日 12:00</span>
                    </li>
                    <li class=" clearfix">
                        <span class="fl">业务联系人：秦胜珠</span><span class="fr spn3"><img src="../assets/right@2x.png" alt=""></span>
                    </li>
                </ul>
            </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "groupreg",
  data() {
    return {
      title: "集体报名"
    };
  }
};
</script>

<style lang="less" scoped>
@family: AlibabaPuHuiTiR;
.groupreg{
    width: 100%;
  font-size: 0;
  background-color: #f8f8f8;
  position: relative;
  height: 13.34rem;
  .mint-header {
    background-color: #fff;
    color: rgb(49, 49, 49);
    font-family: AdobeHeitiStd-Regular;
    font-size: 0.3rem;
    height: 1rem;
  }
  .content{
      width: 100%;
      margin-top:0.2rem;
      
      .top{
          width: 100%;
          height: 2.1rem;
          padding: 0.3rem 0;
          box-sizing: border-box;
          background-color: #fff;
          padding: 0 0.2rem;
      box-sizing: border-box;
          .left{
              width: 32%;
              height: 0.79rem;
              padding-top:0.3rem;
              box-sizing: border-box;
              img{
                  width: 100%;
              }
          }
          .right{
              width: 65%;
              margin-left: 3%;
               padding-top:0.3rem;
              box-sizing: border-box;
              h3{
                 font-family:  @family;
                 font-size: 0.26rem;
                 color:rgb(68,34,34);
                 font-weight: bold;
                 margin-bottom: 0.42rem;
              }
              p{
                font-family:  @family;
                 font-size: 0.2rem;
                 color:rgb(170,162,162);
                 line-height: 0.4rem;
              }
          }
         

      }
       .con{
              margin-top:0.2rem;
              background-color: #fff;
           
              li{
                  font-family: @family;
                  font-size: 0.26rem;
                  color:rgb(49, 49, 49);
                  height: 0.8rem;
                //   line-height: 0.8rem;
                     padding: 0 0.2rem;
                    box-sizing: border-box;
                    padding-top:0.25rem;
                  &:nth-child(2){
                      border-top:1px solid #cfcfcf;
                      border-bottom: 1px solid #cfcfcf;
                  }
                  span{
                      display: inline-block;
                      &.spn1{
                          width: 1rem;
                          height: 0.45rem;
                          img{
                              width: 100%;
                          }
                      }
                      &.spn2{
                          color:rgb(246,91,43);
                          font-size: 0.26rem;
                          font-family: @family;
                      }
                        &.spn3{
                          width: 0.16rem;
                          height: 0.26rem;
                          img{
                              width: 100%;
                          }
                      }

                  }

              }
          }
  }
}
</style>